<template>
	<view>
		<view class="scroll-view-container" >
			<!-- 左侧滑动区 -->
			<scroll-view class="left" scroll-y="true" :style="{height: wh + 'px'}">
			    <block v-for="(item, i) in cateList" :key="i">
			        <view :class="['left-item', i===active ? 'active':' ']" @click="activeChanged(i,item)">
			            {{item.name}}
			        </view>
			    </block>
			</scroll-view>
			<!-- 右侧滑动区 -->
			<scroll-view class="right" scroll-y="true" :style="{height: wh+'px'}">
				<view class="cate-v2" v-for="(item2,i2) in catelevel2" :key="i2">
					<view class="cate-v2-title">
						{{item2.name}}
					</view>
					<view class="cate-v2-text">
						{{item2.description}}
					</view>
					<!-- 第三层 -->
					<view class="cate-v3" v-for="item3,i3 in item2.styles":key="i3" @click="getStyles(item2,item3)">
						<image :src="item3.imageUrl" ></image>
						<view class="cate-v3-title">
							{{item3.name}}
							
						</view>
						
					</view>
				</view>
			</scroll-view>
		</view>
		
	</view>
	
	
</template>

<script>
	export default {
		data() {
			return {
				wh:0,
				categoryKey:'styles',
				active:0,
				//二级分类列表
				catelevel2:[],
				cateList: []
			}
		},
		methods: {
			//
			async getCateList() {

			  try {
				  console.log('当前 baseURL：',uni.$http.baseUrl);
			    const res = await uni.$http.get('/cate/categories');
				console.log('完整响应数据:', res); 
			    
			    this.cateList = res.data; 
			    console.log('成功获取数据：', this.cateList);
			  } catch (err) {
			    console.error('请求失败：', err);
			  }
			},
			getCate1List(){
				
				this.catelevel2 = this.cateList[0].subCategories; 
			},
			activeChanged(i,item){
				this.active = i;
				this.catelevel2 = this.cateList[i].subCategories; 
				this.categoryKey=item.categoryKey;
			},
			getStyles(item2,item3){
				console.log(this.categoryKey);
				let url = ''; 
				if (this.categoryKey === "styles" || this.categoryKey === "design" || this.categoryKey === "cloth") {
				    url='/subpkg/cate/'+this.categoryKey+'?name=' +item3.name
				} else {
				    url = '/subpkg/cate/'+this.categoryKey+'?name=' +item2.name
				}
			uni.navigateTo({
				url:url
			})
			}
		},
		
		onLoad() {
			const sysinfo=uni.getSystemInfoSync()
			this.wh=sysinfo.windowHeight
			// 从接口获取数据
			this.getCateList().then(() => { 
			    this.getCate1List(); 
			  });
		}
	}
</script>

<style>
.scroll-view-container
{
	display: flex;
}
.left
{
	width: 20%;
}
.right
{
	width: 80%;
}
.left-item{
	background-color: #f7f7f7;
	line-height: 100px;
	text-align: center;
	font-size: 16px;
	border-radius: 3px;
}
.left-item.active{
	background-color: #E0D6CA ;
	position: relative;
}
.left-item.active::before {
    content: ' ';
    display: block;
    width: 5px;
    height: 50px;
    background-color: #e0c9be;
    position: absolute; /* 绝对定位 */
    left: 0; /* 位于左侧 */
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 精确垂直居中 */
}


.cate-v2 {
  height: auto; 
  margin: 10px;
  padding: 15px; 
  background: #fff; 
  border-radius: 8px; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 添加投影增强立体感 */
}


.cate-v2-title {
  font-size: 17px;
  font-weight: 600; 
  margin-bottom: 8px;
}

.cate-v2-text {
  font-size: 12px;
  margin-bottom: 15px;
}


.cate-v3 {
  height: auto;
  min-height: 100px;
  margin: 10px 0;
  padding: 12px;
  background: #fff;
  border-radius: 5px;
  display: flex; 
  align-items: center;
  gap: 15px; 
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}


.cate-v3 image {
	width: 160px;
	aspect-ratio: 9/10;
	height: auto;
	flex-shrink: 0; 
	display: block; 
	border-radius: 4px;
	object-fit: cover; 
	box-sizing: border-box; 
}


.cate-v3-title {
	font-size: 16px;
	font-weight: 600;
	color: #444;
	line-height: 1.5;
	flex: 1; 
}
.cate-v3-text{
	font-size: 12px;
}

</style>